<template>
    <view>
        <!-- index.wxml -->
        <view class="search" @tap="goToSearchPage"><search></search></view>
        <swiper :indicator-dots="true" indicator-color="grey" indicator-active-color="white" :autoplay="true" interval="5000" duration="500">
            <block v-for="(item, index) in swiperList" :key="index">
                <swiper-item>
                    <image :src="item.image_src" mode="scaleToFill" @tap="onGoodsDetail" :data-gid="item.goods_id" :data-goods-id="item.goods_id" class="slide-image" />
                </swiper-item>
            </block>
        </swiper>
        <view class="container">
            <block v-for="(item, index) in catItems" :key="index">
                <view @tap="onItemTap" :data-url="item.navigator_url" :data-open-type="item.open_type">
                    <image class="item-image" :src="item.image_src"></image>
                </view>
            </block>
        </view>
        <view class="floor-container">
            <block v-for="(item, index) in floorList" :key="index">
                <view class="floor-item">
                    <view class="floor-title">
                        <image :src="item.floor_title.image_src" mode="widthFix"></image>
                    </view>
                    <view class="product-box">
                        <view class="product-list-left">
                            <block v-for="(item, index1) in item.product_list" :key="index1">
                                <view class="product-item-left" @tap="navigateToDetail" :data-url="item.navigator_url">
                                    <image :src="item.image_src" mode="widthFix" :style="'width: ' + item.image_width + 'rpx;'"></image>
                                </view>
                            </block>
                            <view class="product-list-right">
                                <block v-for="(item, index1) in item.product_list" :key="index1">
                                    <view class="product-item-right" @tap="navigateToDetail" :data-url="item.navigator_url">
                                        <image :src="item.image_src" mode="widthFix" :style="'width: ' + item.image_width + 'rpx;'"></image>
                                    </view>
                                </block>
                            </view>
                        </view>
                    </view>
                </view>
            </block>
        </view>
    </view>
</template>

<script>
import search from '../../Comp/search/search';
// index.js
export default {
    components: {
        search
    },
    data() {
        return {
            swiperList: [],
            catItems: [],
            floorList: []
        };
    },
    onLoad: function () {
        this.getSwiperData();
        this.fetchCatItems();
        this.getFloorData();
    },
    methods: {
        getSwiperData: function () {
            var that = this;
            uni.request({
                url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
                method: 'GET',
                success: function (res) {
                    if (res.data.meta.status === 200) {
                        that.setData({
                            swiperList: res.data.message
                        });
                    }
                }
            });
        },

        fetchCatItems: function () {
            var that = this;
            uni.request({
                url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/catitems',
                method: 'GET',
                success: function (res) {
                    if (res.data.meta.status === 200) {
                        that.setData({
                            catItems: res.data.message
                        });
                    }
                },
                fail: function (err) {
                    console.error(err);
                }
            });
        },

        getFloorData: function () {
            var that = this;
            uni.request({
                url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/floordata',
                method: 'GET',
                success: function (res) {
                    if (res.data.meta.status === 200) {
                        that.setData({
                            floorList: res.data.message
                        });
                    }
                }
            });
        },

        goToSearchPage: function () {
            uni.navigateTo({
                url: '/pages/search/search'
            });
        },

        onGoodsDetail: function (event) {
            const gid = event.currentTarget.dataset.gid;
            console.log('onGoodsDetail gid:', gid);
            uni.navigateTo({
                url: `/pages/goodsdetails/goodsdetails?gid=${gid}`
            });
        },

        onItemTap() {
            console.log('占位：函数 onItemTap 未声明');
        },

        navigateToDetail() {
            console.log('占位：函数 navigateToDetail 未声明');
        }
    }
};
</script>
<style>
/**index.wxss**/
swiper {
    height: 425rpx;
}
.slide-image {
    width: 100%;
    height: 425rpx;
    padding: 0;
    margin: 0;
}
.search {
    background-color: #ff3333;
    padding: 0;
    margin: 0;
    padding-bottom: 15rpx;
}
.container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 0;
    margin: 15rpx 0 0 0;
    background-color: white;
}
.item-image {
    width: 150rpx;
    height: 150rpx;
}

.floor-container {
    display: flex;
    flex-direction: column;
}

.floor-item {
    margin-bottom: 20rpx;
}
.floor-title {
    background-color: rgb(243, 240, 240);
}
.floor-title image {
    width: 100%;
}
.product-box {
    display: flex;
}
.product-box image {
    margin: 8rpx;
}
.product-list-left {
    display: flex;
}
.product-list-right {
    display: flex;
    flex-wrap: wrap;
}
.product-item-left:not(:first-child) {
    display: none;
}
.product-item-right:first-child {
    display: none;
}
.product-item image {
    width: 100%;
}
</style>
